<template>
  <div>
    <el-dialog :visible.sync="showPointDialog" :before-close="check" title="新增" width="70%">
      <div class="content">
        <el-tabs v-model="activeName" stretch :before-leave="getStatus" @tab-click="handleClick">
          <el-tab-pane label="产品组基本信息" name="first" class="btnFatcher">
            <product-basic ref="productOne" :judge-status="judgeStatus" :clear-val="clearVal" />
          </el-tab-pane>
          <el-tab-pane label="关联资费策略" name="second" class="btnFatcher">
            <product-plan
              :tariff-list="tariffList"
              :judge-status="judgeStatus"
              @openPxpenses="openPxpenses"
            />
          </el-tab-pane>
          <el-tab-pane label="关联产品" name="third" class="btnFatcher">
            <connect-product
              :product-listnew="productListnew"
              :judge-status="judgeStatus"
              @openProduct="openProduct"
              @watchDetail="watchDetail"
            />
          </el-tab-pane>
          <el-tab-pane label="关联优惠策略" name="fourth" class="btnFatcher">
            <connect-tactics
              :ref-fer="referential"
              :judge-status="judgeStatus"
              @openConnect="openConnect"
            />
          </el-tab-pane>
        </el-tabs>
        <div class="btnArrss">
          <el-button
            v-show="activeName === 'first'"
            type="primary"
            size="small"
            plain
            round
            @click="check()"
          >取消</el-button>
          <el-button
            v-show="activeName !== 'first'"
            type="primary"
            size="small"
            plain
            round
            @click="before()"
          >上一步</el-button>
          <el-button
            v-show="activeName !== 'fourth'"
            type="primary"
            size="small"
            round
            @click="next()"
          >下一步</el-button>
          <el-button
            v-show="activeName === 'fourth' && !judgeStatus"
            type="primary"
            size="small"
            round
            @click="saveResult()"
          >保存</el-button>
          <el-button
            v-show="activeName === 'fourth' && judgeStatus"
            type="primary"
            size="small"
            round
            @click="check()"
          >关闭</el-button>
          <el-button
            v-show="activeName === 'fourth' && checkVal"
            type="primary"
            size="small"
            round
            @click="pass()"
          >通过</el-button>
          <el-button
            v-show="activeName === 'fourth' && checkVal"
            type="primary"
            size="small"
            round
            @click="noPass()"
          >不通过</el-button>
        </div>
      </div>
    </el-dialog>
    <pay-list :addpay-list="addpayList" :pay-has="payHas" @closePay="closePay" />
    <select-product
      :select-product="selectProduct"
      :plat-formstring="platFormstring"
      :product-has="productHas"
      @closeProduct="closeProduct"
    />
    <watch-detail
      :watch-details="watchDetails"
      :product-scope="productScope"
      @closeDetails="closeDetails"
    />
    <connect-discount :add-plana="addPlana" :re-ial="referential" @closeDis="closeDis" />
  </div>
</template>

<script>
import { getSelectS } from '@/api/product.js'
import productBasic from './create/pro1'
import productPlan from './create/pro2'
import connectProduct from './create/pro3'
import {
  checkProductGroup,
  saveProductGroup,
  productDetail
} from '@/api/productGroup.js'
import payList from '@/views/product/components/payList.vue' // 添加资费策略
import selectProduct from './selectProduct.vue' // 选择产品
import watchDetail from './watchDetail' // 查看详情
import connectTactics from './create/pro4'
import connectDiscount from '@/views/product/components/discounts.vue'
import { getUpVersionDetail } from '@/api/productGroup.js'
import { checkPass, checkNoPass } from '@/api/productGroupCheck.js'
export default {
  components: {
    productBasic: productBasic,
    productPlan: productPlan,
    payList: payList,
    connectProduct: connectProduct,
    selectProduct: selectProduct,
    watchDetail: watchDetail,
    connectTactics: connectTactics,
    connectDiscount: connectDiscount
  },
  props: {
    createDialog: {
      type: Boolean,
      default: false
    },
    // 判断是否是查看
    watchStatus: {
      type: Boolean,
      default: false
    },
    // 编辑&查看的值
    editObj: {
      type: Object,
      default: () => {}
    },
    groupScope: {
      type: Object,
      default: () => {}
    },
    trueStatus: {
      type: Boolean,
      default: false
    },
    checkVal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showPointDialog: false,
      productScope: {},
      result: {},
      watchDetails: false, // 查看详情
      selectProduct: false,
      referential: {},
      platFormstring: [],
      activeName: 'first', // tab切换
      clearVal: false, // 清空值
      productListnew: [], // 产品列表
      addpayList: false, // 资费策略遮罩
      payHas: [], // 已选的资费策略
      productHas: [], // 已选的产品列表
      addPlana: false, // 关联优惠策略
      judgeStatus: false,
      tariffList: [] // 资费策略数组
    }
  },
  watch: {
    createDialog(val) {
      this.showPointDialog = val
      if (val) {
        if (!this.trueStatus) {
          var judgeAdd = Object.keys(this.editObj) // productDetail
          if (judgeAdd.length > 0) {
            productDetail(this.editObj).then((res) => {
              console.log(res)
              if (res.resultCode === '0000') {
                const data = res.data
                this.productGroupId = data.productGroupId
                this.$refs.productOne.name = data.name
                this.$refs.productOne.description = data.description
                this.$refs.productOne.productType = data.groupType
                this.$refs.productOne.platArr = data.platformList
                this.tariffList = data.tariffList
                this.productListnew = data.relatedProductsList
                this.referential = data.preferentialTariffBean
                if (this.watchStatus) {
                  this.judgeStatus = true
                }
                if (this.checkVal) {
                  this.judgeStatus = true
                }
              }
            })
          }
        }
        if (this.trueStatus) {
          // this.editObj = {}
          getUpVersionDetail(this.groupScope).then((res) => {
            if (res.resultCode === '0000') {
              const data = res.data
              this.productGroupId = data.productGroupId
              this.$refs.productOne.name = data.name
              this.$refs.productOne.description = data.description
              this.$refs.productOne.productType = data.groupType
              this.$refs.productOne.platArr = data.platformList
              this.tariffList = data.tariffList
              this.productListnew = data.relatedProductsList
              this.referential = data.preferentialTariffBean
              this.judgeStatus = true
            }
          })
        }
        this.clearVal = false
      }
    }
  },
  methods: {
    // 通过审核
    pass() {
      var data = {
        id: this.editObj.id,
        productId: this.editObj.productGroupId
      }
      this.$confirm('确定通过审核吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        checkPass(data).then(res => {
          if (res.resultCode === '0000') {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.check(true)
          }
        })
      }).catch(() => {
        console.log('操作取消')
      })
    },
    // 不通过
    noPass(id, productId) {
      this.$prompt('确认不通过该产品的审核吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入不通过原因'
      }).then(({ value }) => {
        var data = {
          id: this.editObj.id,
          productId: this.editObj.productGroupId,
          reason: value
        }
        checkNoPass(data).then(res => {
          if (res.resultCode === '0000') {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.check(true)
          }
        })
      }).catch(() => {
        console.log('操作取消')
      })
    },
    saveResult() {
      this.result.preferentialTariffBean = this.referential
      this.result.productGroupType = '1'
      const statusAdd = Object.keys(this.editObj).length
      if (statusAdd > 0) {
        this.result.productGroupId = this.productGroupId
        this.result.id = this.editObj.id
      }
      saveProductGroup(this.result).then((res) => {
        if (res.resultCode === '0000') {
          console.log(res)
          this.check()
        }
      })
    },
    // 关闭优惠策略
    closeDis(val) {
      // 避免传空值报错
      if (Object.prototype.toString.call(val) === '[object MouseEvent]') {
        this.referential = {}
      } else {
        this.referential = val
      }
      this.addPlana = false
    },
    // 关联优惠策略
    openConnect() {
      this.addPlana = true
    },
    // 关闭查看产品遮罩
    closeDetails() {
      this.watchDetails = false
    },
    // 查看详情
    watchDetail(scope) {
      this.watchDetails = true
      this.productScope = scope
    },
    before() {
      this.realStatus = true
      if (this.activeName === 'second') {
        this.activeName = 'first'
      }
      if (this.activeName === 'third') {
        this.activeName = 'second'
      }
      if (this.activeName === 'fourth') {
        this.activeName = 'third'
      }
    },
    // 关闭宣传产品
    closeProduct(val) {
      this.selectProduct = false
      if (Array.isArray(val) && val.length > 0) {
        this.productListnew.push(...val)
      }
    },
    // 打开选择产品
    openProduct(val) {
      this.selectProduct = true
      this.productHas = val
    },
    // 打开资费策略
    openPxpenses(arr) {
      this.payHas = arr
      this.addpayList = true
    },
    // 关闭资费策略并得到数据
    closePay(val) {
      this.addpayList = false
      if (Array.isArray(val) && val.length > 0) {
        this.tariffList.push(...val)
      }
    },
    // 点击下一步
    next() {
      const tabValue = this.activeName
      const productOne = this.$refs.productOne
      if (tabValue === 'first') {
        // 获取page1的所有信息
        const name = productOne.name
        const productType = productOne.productType
        const platArr = productOne.platArr
        this.platFormstring = platArr.map((item) => {
          return item.platformId
        })
        // const description = productOne.description
        if (name === '') {
          this.$message({
            type: 'error',
            message: '请输入产品组名称'
          })
          return false
        }
        if (productType === '') {
          this.$message({
            type: 'error',
            message: '请输入产品组类型'
          })
          return false
        }
        if (
          platArr.length === 1 &&
          (platArr[0].platformId === '' || platArr[0].cpproductId === '')
        ) {
          this.$message({
            type: 'error',
            message: '请输入所属平台和运营商产品标识'
          })
          return false
        }
        var obj = {
          name: productOne.name,
          platformId: this.platFormstring.join(',')
        }
        if (this.editObj) {
          var statusAdd = Object.keys(this.editObj).length
          if (statusAdd > 0) {
            obj.id = this.editObj.id
          }
        }
        if (!this.trueStatus && !this.checkVal) {
          checkProductGroup(obj).then((res) => {
            if (res.resultCode === '0000') {
              this.result = {
                name: name,
                groupType: productOne.productType,
                description: productOne.description,
                platformList: productOne.platArr
              }
              this.realStatus = true
              this.activeName = 'second'
            }
          })
        } else {
          this.realStatus = true
          this.activeName = 'second'
        }
      }
      if (tabValue === 'second') {
        if (this.tariffList.length < 1) {
          this.$message({
            type: 'error',
            message: '请选择资费策略'
          })
          return false
        }
        console.log(this.tariffList)
        const status = this.tariffList.some((item) => {
          if (!item.sequence && item.sequence !== 0) {
            this.$message({
              type: 'error',
              message: '请填写资费策略排序'
            })
            return true
          }
        })
        if (!status) {
          this.realStatus = true
          this.activeName = 'third'
          this.result.tariffList = this.tariffList
        }
      }
      if (tabValue === 'third') {
        if (this.productListnew.length < 1) {
          this.$message({
            type: 'error',
            message: '请选择关联产品'
          })
          return false
        }
        this.realStatus = true
        this.activeName = 'fourth'
        var prod = {
          functionType: 'productType'
        }
        getSelectS(prod).then((res) => {
          const datas = res.data.list
          datas.forEach((element) => {
            this.productListnew.forEach((item) => {
              if (item.type === element.typeName) {
                item.type = element.typeId
              }
            })
          })
        })
        this.result.relatedProductsList = this.productListnew
      }
    },
    check(val) {
      var that = this
      this.clearVal = true
      this.judgeStatus = false
      this.$emit('closeCreate', val)
      this.realStatus = true
      this.activeName = 'first' // 归位
      this.tariffList = []
      this.productListnew = []
      this.referential = {}
      this.result = {}
      setTimeout(() => {
        that.realStatus = false
      }, 100)
    },
    // 校验
    getStatus() {
      if (this.realStatus) {
        this.realStatus = false
        return true
      } else {
        return false
      }
    },
    handleClick() {
      console.log(2)
    }
  }
}
</script>
<style scoped>
.btnArrss {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>

